<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>就行天下</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/jquery-weui.min.css">
    <link rel="stylesheet" href="__STATIC__/zb/css/base.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/font.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/index.css"/>
    <style>
        .weui-input, .weui-cells__tips {
            font-size: .65rem;
        }
        .weui-uploader__files {
            overflow: initial;
        }
    </style>
</head>
<body>
<div class="pageControl">
    <form action="?" method="post" enctype="multipart/form-data">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="setTitle" type="text" name="title" placeholder="请输入视频标题">
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">标签</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="tag" name="tag" type="text" placeholder="请输入视频标签">
                </div>
            </div>
        </div>
        <div class="weui-cells__tips">视频标签格式   标签1,标签2</div>

        <div class="weui-cells__title">描述信息</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea id="description" maxlength='200' class="weui-textarea" placeholder="请输入视频描述信息" rows="3"></textarea>
                    <div class="weui-textarea-counter"><span id="lyishu">0</span>/200</div>
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">封面</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderCover">
                                <li class="weui-uploader__file weui-uploader__file_status upload-img" style="background-image:url()">
                                    <div class="weui-uploader__file-content">请选择封面图</div>
                                </li>
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="img" class="weui-uploader__input" name="cover" type="file" accept="image/*">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">视频</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderVideo">
                                <li class="weui-uploader__file weui-uploader__file_status upload-video" style="background-image:url()">
                                    <div class="weui-uploader__file-content video-info">请选择视频</div>
                                </li>
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input type="file" id="files" class="weui-uploader__input" name="video" multiple/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="videoId" size="20" value="">

        <input type="hidden" id="uploadAuth" size="20" value="">
        <input type="hidden" id="uploadAddress" size="20" value="">
        <input type="hidden" id="endpoint" size="40" value="http://oss-cn-hangzhou.aliyuncs.com">
        <input type="hidden" id="objectPre" size="20" value="uploadtest/">
        <input type="hidden" id="bucket" size="20" value="testbucket">
        <div class="weui-btn-area">
            <button type="button" onclick="start()" class="weui-btn weui-btn_primary">确定</button>
            <select multiple="multiple" id="textarea" style="display:none; position:relative; width:620px; height:450px; vertical-align:top; border:1px solid #cccccc;"></select>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/zb/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="__STATIC__/zb/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="__STATIC__/zb/js/jquery.cookie.js"></script>
<script type="text/javascript" src="__STATIC__/zb/js/vod-sdk-upload-1.0.6.min.js"></script>
<script type="text/javascript" src="__STATIC__/zb/js/aliyun-sdk.min.js"></script>
<!--视频描述字数限定-->
<script>
    //匹配包含给定属性的元素，keyup在按键释放时发生
    $("#description").keyup(function () {
        var area = $(this);
        //parseInt 方法返回与保存在 numString 中的数字值相等的整数。如果 numString 的前缀不能解释为整数，则返回 NaN（而不是数字）。
        var max = parseInt(area.attr("maxlength"), 10); //获取maxlength的值 转化为10进制，将输入到textarea的文本长度
        //这个判断可知max得到的是不是数字，设定的大小是多少
        if (max > 0) {

            if (area.val().length > max) { //textarea的文本长度大于maxlength
                area.val(area.val().substr(0, max)); //截断textarea的文本重新赋值
            }

            var yishu = area.val().length;
            var sheng = max - area.val().length;
            $("#lyishu").html(yishu);
            $("#lsheng").html(sheng);
        }
    });
</script>
<script>
    var uploader;
    window.onload = new function() {
        uploader = new VODUpload({
            // 文件上传失败
            'onUploadFailed': function (uploadInfo, code, message) {
                log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
            },
            // 文件上传完成
            'onUploadSucceed': function (uploadInfo) {
                log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
                alert('视频上传完成！稍后视频转码完成之后发布');
                window.location.href="/zb/index/index";
            },
            // 文件上传进度
            'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
                $('.video-info').html('已上传'+Math.ceil(uploadedSize * 100 / totalSize) + "%");
            },
            // STS临时账号会过期，过期时触发函数
            'onUploadTokenExpired': function () {
                log("onUploadTokenExpired");
                if (isVodMode()) {
                    // 实现时，从新获取UploadAuth
                    // uploader.resumeUploadWithAuth(uploadAuth);
                } else if (isSTSMode()) {
                    // 实现时，从新获取STS临时账号用于恢复上传
                }
            },
            // 开始上传
            'onUploadstarted': function (uploadInfo) {
                if (isVodMode()) {
                    var uploadAuth = document.getElementById("uploadAuth").value;
                    var uploadAddress = document.getElementById("uploadAddress").value;
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
                }
                log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            }
        });


        if (isVodMode()) {
            // 点播上传。每次上传都是独立的鉴权，所以初始化时，不需要设置鉴权
            uploader.init();
        }
    };
    var img_address = '未选择图片';
    $('#img').on('change',function(){
        var filess = this.files[0];
        var src=getObjectURL(filess);//获取上传文件的路径
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/zb/upload/upload_img";
        $.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                if(data){
                    $('.upload-img').css('background-image',"url("+data+")");
                    $('.upload-img').removeClass('weui-uploader__file_status');
                    img_address = data;
                }
            }
        });
    })


    //获取上传文件的url
    function getObjectURL(file)
    {
        var url = null;
        if (window.createObjectURL != undefined)
        {
            url = window.createObjectURL(file);
        }
        else if (window.URL != undefined)
        {
            url = window.URL.createObjectURL(file);
        }
        else if (window.webkitURL != undefined)
        {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    $('#files').on('click',function (){
        var setTitle = $('#setTitle').val();
        var description = $('#description').val();
        var tag = $('#tag').val();
        var cover = img_address;
        if(setTitle == ''){
            alert('视频标题不能为空！');return;
        }
        if(tag == ''){
            alert('视频标签不能为空！');return;
        }
        if(description == ''){
            alert('视频描述不能为空！');return;
        }
        if(img_address == ''){
            alert('请选择一张封面图！');return;
        }
        $('#files').on('change',function(){
            $.post(
                "/zb/upload/index",
                {'setTitle':setTitle,'description':description, 'tag': tag, 'img_address': cover},
                function(data){
                    if(data.code == 1){
                        $('#uploadAuth').val(data.msg.uploadAuth);
                        $('#uploadAddress').val(data.msg.uploadAddress);
                        //将视频id赋值给隐藏域
                        $('#videoId').val(data.msg.videoId);
                        $('.video-info').html('上传视频就绪');
                    }
                },'json'
            )
        })
    })

    document.getElementById("files").addEventListener('change', function (event) {
            var endpoint = document.getElementById("endpoint").value;
            var bucket = document.getElementById("bucket").value;
            var objectPre = document.getElementById("objectPre").value;
            var userData;

            if (isVodMode()) {
                userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
            } else {
                userData = '{"Vod":{"Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19",\"Tags":"tag1,tag2,标签3","UserData":"user data"}}';
            }

            for(var i=0; i<event.target.files.length; i++) {
                log("add file: " + event.target.files[i].name);
                if (isVodMode()) {
                    // 点播上传。每次上传都是独立的OSS object，所以添加文件时，不需要设置OSS的属性
                    uploader.addFile(event.target.files[i], null, null, null, userData);
                } else {
                    uploader.addFile(event.target.files[i], endpoint, bucket, objectPre + event.target.files[i].name, userData);
                }
            }
        });

    var textarea=document.getElementById("textarea");

    function start() {
        var videoId = $('#videoId').val();
        if(videoId == ''){
            alert('请选择一个视频！');return;
        }
        log("start upload.");
        uploader.startUpload();
    }

    function stop() {
        log("stop upload.");
        uploader.stopUpload();
    }

    function clearLog() {
        textarea.options.length = 0;
    }

    function log(value) {
        if (!value) {
            return;
        }

        var len = textarea.options.length;
        if (len > 0 && textarea.options[len-1].value.substring(0, 40) == value.substring(0, 40)) {
            textarea.remove(len-1);
        } else if (len > 25) {
            textarea.remove(0);
        }

        var option=document.createElement("option");
        option.value=value,option.innerHTML=value;
        textarea.appendChild(option);
    }

    function isVodMode() {
        var uploadAuth = document.getElementById("uploadAuth").value;
        return (uploadAuth && uploadAuth.length > 0);
    }

</script>
</body>
</html>

